<script setup lang="ts">
import { CirclePlus, Delete, Edit, Top, Bottom } from '@element-plus/icons-vue'

interface Tree {
  label: string
  children?: Tree[]
}

const defaultProps = {
  children: 'children',
  label: 'label',
}

const handleNodeClick = (data: Tree) => {
  console.log(data)
}

const treeData: Tree[] = [
  {
    label: '全部分类',
    children: [
      {
        label: '自定义',
      },
      {
        label: '金税盘驱动',
      },
      {
        label: '增值税发票',
        children: [
          {
            label: '报错',
            children: [
              {
                label: '打印机报错',
              },
            ],
          },
        ],
      },
    ],
  },
]
</script>

<template>
  <div class="container">
    <div class="operate">
      <span class="label">操作：</span>
      <el-icon><CirclePlus /></el-icon>
      <el-icon><Delete /></el-icon>
      <el-icon><Edit /></el-icon>
      <el-icon><Top /></el-icon>
      <el-icon><Bottom /></el-icon>
    </div>
    <div>
      <el-tree
        :data="treeData"
        :props="defaultProps"
        default-expand-all
        @node-click="handleNodeClick"
      />
    </div>
  </div>
</template>

<style scoped>
.container {
  height: 300px;
  overflow: auto;
}

.operate {
  width: 60%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.3rem;
}

.operate .label {
  font-size: 1rem;
}
</style>
